(function(){
	// carousel
	let imgs = ["../img/crs3.jpg","../img/crs4.jpg","../img/crs5.jpg","../img/crs6.jpg","../img/crs7.jpg","../img/crs8.jpg"];
	function carousel(){
		this.container = document.querySelector(".carousel>div");
		this.ul = document.querySelector(".carousel>ul");
		this.j = 0;
	}
	carousel.prototype.init = function(){
		this.render();
		this.interval();
	}
	carousel.prototype.render = function(){
		this.container.style.width = 3.6*imgs.length + "rem";
		this.ul.style.width = .1*imgs.length + "rem";
		this.ul.style.marginLeft = .05*imgs.length*-1 + "rem";
		imgs.forEach((val,i)=>{
			let img = new Image();
			img.src = val;
			this.container.appendChild(img);
			let li = document.createElement("li");
			i == 0 && (li.className = "active");
			this.ul.appendChild(li);
		})
	}
	carousel.prototype.interval = function(){
		let me = this;
		this.timer = setInterval(function(){
			me.j == imgs.length - 1 ? (me.j = 0) : me.j++
			me.container.style.marginLeft = -3.6*me.j + "rem";
			for(let i in me.ul.children){
				me.ul.children[i].className = "";
			}
			me.ul.children[me.j].className = "active";
		},2500)
	}
	let crsl = new carousel();
	crsl.init();

// munu
	let menu = document.querySelector(".menu"),
	sportSpan = menu.lastElementChild;
	menu.onclick = function(){
		var target = event.srcElement;
		if(target.nodeName == "A"){
			sportSpan.style.left = target.className;
			Array.prototype.slice.apply(menu.children).slice(0,3).forEach(val=>val.style.color = "#807f93");
			target.style.color = "#191919";
		}
	}
})()